<template>
  <div class="prod">
    <div v-for="item in content" :key="item.id" style="width: 50%">
      <div class="prod-Box" @click="showVideo(item.introduce)">
        <div class="prod-left">
          <p>{{ item.title }}</p>
          <p>{{ item.introduce }}</p>
        </div>
        <div class="prod-right">
          <img v-if="item.poster" :src="item.poster" alt="封面" />
          <p v-else>暂无封面</p>
        </div>
      </div>
    </div>
    <transition name="translateY">
      <video-player
        v-if="ifPlayer"
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </transition>
    <transition name="fadeScale">
      <div class="screen" v-if="IfReading">
        <div class="screenBox">
          <span class="cancel" @click="closeScreen">X</span>
          <span class="main">{{ introduce }}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import { contentType } from "@/type/mine";
const props = defineProps({
  content: {
    type: Array as () => Array<contentType>,
    default: () => [],
  },
});
const introduce = ref<string>("");
const ifPlayer = ref<boolean>(false);
const IfReading = ref<boolean>(false);
const playerOptions = {
  playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
  autoplay: false, // 如果为true,浏览器准备好时开始回放。
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 是否视频一结束就重新开始。
  preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: "zh-CN",
  aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  sources: [
    {
      type: "video/mp4", // 类型
      src: "", // url地址
    },
  ],
  poster: "", // 封面地址
  notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controlBar: {
    timeDivider: true, // 当前时间和持续时间的分隔符
    durationDisplay: true, // 显示持续时间
    remainingTimeDisplay: false, // 是否显示剩余时间功能
    fullscreenToggle: true, // 是否显示全屏按钮
  },
};
const closeScreen = () => {
  ifPlayer.value = false;
  IfReading.value = false;
};
const showVideo = (introduce: string) => {
  ifPlayer.value = true;
  introduce = introduce;
  IfReading.value = true;
};
</script>

<style lang="scss" scoped>
@import url("../../../../css/comment/animate.css");
.prod {
  padding: 13px 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  .screen {
    box-sizing: border-box;
    position: absolute;
    z-index: 999999;
    margin: auto;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    background-color: #fff;
    word-wrap: break-word;
    overflow-y: scroll;
    background-color: rgba(255, 255, 255, 0.9);
    .cancel {
      display: inline-block;
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 25px;

      transition: all 0.3s;
      z-index: 999999;
      &:hover {
        color: red;
      }
      &:active {
        transform: scale(1.8);
      }
    }
    .WriteTitle {
      text-align: center;
      font-size: 25px;
      font-weight: 600;
      margin-bottom: 25px;
    }
    .main {
      margin: auto;
      width: 80%;
      height: 140px;
      text-align: center;
      position: absolute;
      bottom: 20px;
      left: 0px;
      right: 0;
      box-sizing: border-box;
      padding: 10px 30px;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 17px;
      overflow: scroll;
    }
  }
  .video-player {
    position: fixed;
    margin: 0 auto;

    z-index: 9999999999;
    top: 40px;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
  }
  .prod-Box {
    margin: 15px 10px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    border-radius: 30px;
    transition: all 0.2s;
    height: 75px;
    justify-content: space-between;
    &:hover {
      box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
      transform: scale(1.02);
    }
    .prod-left {
      flex-basis: 50%;
      text-align: center;
      overflow: hidden;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 17px;
        font-weight: 300;
        &:nth-child(2) {
          white-space: pre-wrap;
          font-weight: 300;
          font-size: 13px;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3; //表示超出2行就隐藏并显示省略号
          -webkit-box-orient: vertical;
        }
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .prod-right {
      flex-basis: 45%;
      border: 1px solid rgba(0, 0, 0, 0.1);
      p {
        font-weight: bolder;
        font-size: 30px;
        color: rgba(255, 255, 255, 0.3);
        text-align: center;
        line-height: 75px;
      }
      img {
        width: 100%;
        height: 75px;
      }
    }
  }
}
</style>
